<template>
  <PageView title="抽屉组件使用示例">
    <a-card class="mb-4" title="使用 useDrawer 进行抽屉操作">
      <a-button type="primary" class="my-4" @click="openDrawerLoading"> 打开Drawer </a-button>
    </a-card>
    <a-card class="mb-4" title="内外同时控制显示隐藏">
      <a-button type="primary" class="my-4" @click="openDrawer2(true)"> 打开Drawer </a-button>
    </a-card>

    <a-card class="mb-4" title="自适应高度/显示footer">
      <a-button type="primary" class="my-4" @click="openDrawer3(true)"> 打开Drawer </a-button>
    </a-card>

    <a-card class="mb-4" title="打开Drawer并传递数据">
      <a-button type="primary" class="my-4" @click="send">打开Drawer </a-button>
    </a-card>

    <Drawer1 @register="register1" />
    <Drawer2 @register="register2" />
    <Drawer3 @register="register3" />
    <Drawer4 @register="register4" />
  </PageView>
</template>
<script lang="ts" setup>
import { useDrawer } from "@/components/Drawer";
import Drawer1 from "./Drawer1.vue";
import Drawer2 from "./Drawer2.vue";
import Drawer3 from "./Drawer3.vue";
import Drawer4 from "./Drawer4.vue";

const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
const [register2, { openDrawer: openDrawer2 }] = useDrawer();
const [register3, { openDrawer: openDrawer3 }] = useDrawer();
const [register4, { openDrawer: openDrawer4 }] = useDrawer();

function send() {
  openDrawer4(true, {
    data: "content",
    info: "Info"
  });
}
function openDrawerLoading() {
  openDrawer1();
  setDrawerProps({ loading: true });
  setTimeout(() => {
    setDrawerProps({ loading: false });
  }, 2000);
}
</script>
